<template>
  <page-meta :root-font-size="fontsize" class="manage-service">
    <xlNavBar title="管理服务" bgc="ff9d49" :showLeft="true"></xlNavBar>

    <view class="ms-header">
      <view class="h-left">置顶服务信息，获取更大的曝光量</view>
      <view class="h-right">
        <img class="icon" src="./image/top-icon.png" mode="widthFix" />
        立即置顶
      </view>
    </view>

    <view class="ms-wrapper">
      <view class="w-header">
        <view class="status">展示中</view>
        排骨米饭快餐加盟
      </view>
      <view class="w-label">
        <view class="label">餐饮加盟</view>
        <view class="label">服务范围：北京市</view>
      </view>
      <view class="w-title">
        排骨米饭快餐加盟，优选食材品质当先，具备非常强的市场竞争力，出餐快，可堂食可外卖，无需经验，3天学卡萨丁放开接啊
      </view>
      <view class="w-operate">
        <view class="time">2022-11-15 12:00</view>
        <view class="operate">
          <img class="icon" src="./image/edit-icon.png" mode="widthFix" />修改
        </view>
      </view>
    </view>

    <view class="ms-tip">
      <view class="t-header">
        <view class="left">平台登录用户联系记录</view>
        <view class="right">
          查看详情
          <img class="icon" src="./image/right-icon.png" mode="widthFix" />
        </view>
      </view>
      <view class="t-content">
        共
        <text class="text">10用户</text>
        已拨打您的电话，如未接听到，可查看详情， 与对方去的免费联系。
      </view>
    </view>

    <view class="ms-operate">
      <view class="o-left">2积分优化发布时间排名， 获得更多曝光</view>
      <view class="o-right"> 立即刷新 </view>
    </view>
  </page-meta>
</template>

<script>
import yesImage from "./image/status/pass-yes.png";
import examiningImage from "./image/status/examining.png";
import closedImage from "./image/status/closed.png";
import noImage from "./image/status/pass-no.png";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "ManageService",
  data() {
    return {
      fontsize: "",
      imageStatus: {
        1: yesImage,
        2: examiningImage,
        3: closedImage,
        4: examiningImage,
        5: noImage
      },
      manageStoreList: [],
      contactTotal: 0,
      intentionTotal: 0,
      tipOption: {
        title: "",
        content: "",
        submitText: "",
        submit: () => {}
      },
      tipPopup: false,
      storeId: null,
      storeDetail: null
    };
  },
  computed: {
    ...mapGetters("user", ["getUserInfo"])
  },
  onLoad() {
    let designWidth = 37.5;
    uni.onWindowResize((res) => {
      this.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
    });
    uni.getSystemInfo({
      success: (res) => {
        this.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
      }
    });
  },
  onShow() {
    this.getList();
  },
  methods: {
    ...mapActions("user", ["setUserInfo", "setStatus"]),
    async getContactList() {
      let params = {
        purpose_id: this.storeId
      };
      let contactRes = await this.$http.requestSync(
        "/storefronts/contact_history",
        params,
        "POST"
      );
      let intentionRes = await this.$http.requestSync(
        "/storefronts/intention_history",
        params,
        "POST"
      );
      this.contactTotal = contactRes.total;
      this.intentionTotal = intentionRes.total;
    },
    async getList() {
      let res = await this.$http.requestSync("/storefronts/my", {}, "GET");
      if (res.code === 200 && res.storefronts && res.storefronts.length > 0) {
        this.manageStoreList = res.storefronts;
        this.storeId = res.storefronts[0].id;
        this.storeDetail = res.storefronts[0];
        this.getContactList();
      } else {
        this.manageStoreList = [];
      }
    },
    previewImage(images, index) {
      uni.previewImage({
        current: index,
        urls: images
      });
    },
    getImages(str) {
      return str.split(",");
    },
    async handleActive(curStatus, status) {
      if (curStatus === status) {
        return;
      }
      let params = {
        id: this.storeId,
        status: status
      };
      // 1、生效， 2、删除，3、暂停，4、待审核，5、审核拒绝
      let res = await this.$http.requestSync(
        "/storefronts/update_status",
        params,
        "POST"
      );
      if (res.code === 200) {
        this.getList();
      }
    },
    async handleRefresh() {
      if (this.storeDetail.status !== 1) {
        return this.$layer.message("店铺审核未通过");
      }
      let params = {
        id: this.storeId,
        integral: 2
      };
      let res = await this.$http.requestSync(
        "/storefronts/refresh",
        params,
        "POST"
      );

      if (res.code === 200) {
        this.getList();
        this.setUserInfo();
        this.$layer.message("更新成功");
      } else if (res.code === 10005) {
        this.tipPopup = true;
        this.tipOption = {
          title: "温馨提示",
          submitText: "去获取积分",
          content: "当前您的积分不足，是否前往获取积分？",
          submit: () => {
            if (this.$isIos() == "IOS") {
              this.$togo("/pages3/myIntegral");
            } else {
              this.$togo("/pages3/integralRechargePage");
            }
          }
        };
      } else {
        this.$layer.message(res.message);
      }
    },
    handleCrown() {
      let city = this.getCityInfo();
      this.$redirectTo(`/shopPackage/topStore?id=${this.storeId}&city=${city}`);
    },
    getCityInfo() {
      let province = this.storeDetail.first_area_des;
      let cityList = ["北京市", "天津市", "上海市", "重庆市"];
      if (cityList.includes(province)) {
        return province;
      }
      return this.storeDetail.second_area_des;
    },
    editStore() {
      this.$togo("/shopPackage/publishStore?id=" + this.storeId);
    },
    deleteStore() {
      this.tipPopup = true;
      this.tipOption = {
        title: "",
        submitText: "确定",
        content: "当前店铺转让中，是否确认删除该店铺信息？（删除后将不再展示）",
        submit: () => {
          this.submitDeleteStore();
        }
      };
    },
    closeTip() {
      this.tipPopup = false;
    },
    async submitDeleteStore() {
      let params = {
        id: this.storeId,
        status: 2
      };
      //1、生效， 2、删除，3、暂停，4、待审核，5、审核拒绝
      let res = await this.$http.requestSync(
        "/storefronts/update_status",
        params,
        "POST"
      );
      if (res.code === 200) {
        this.setStatus();
        this.$back();
      }
      this.tipPopup = false;
    },
    goStoreDetail() {
      if (this.storeDetail.status === 4) {
        return;
      }
      this.$togo("/shopPackage/storeDetail?id=" + this.storeId);
    },
    goContactStore() {
      this.$togo("/shopPackage/contactStore?id=" + this.storeId);
    }
  }
};
</script>

<style scoped lang="scss">
.manage-service {
  height: 100vh;
  background: #f7f7f7;
  .ms-header {
    display: flex;
    align-items: center;
    width: calc(100% - 20px);
    height: 50px;
    padding: 0 10px;
    margin: 10px 10px 0 10px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    .h-left {
      flex: 1;
      font-size: 14px;
      color: #333333;
    }
    .h-right {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 32px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      background: #53ce78;
      border-radius: 16px;
      .icon {
        width: 17px;
        height: 17px;
        margin-right: 5px;
      }
    }
  }

  .ms-wrapper {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px 10px 0 10px;
    padding: 15px 10px;
    border-radius: 10px;
    background: #fbfff9;
    border: 1px solid #dff0de;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.0275);
    .w-header {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      .status {
        display: flex;
        align-items: center;
        height: 22px;
        padding: 0 10px;
        margin-right: 6px;
        background: #ff8822;
        color: #ffffff;
        font-size: 12px;
        border-radius: 3px;
      }
    }
    .w-label {
      margin-top: 10px;
      display: flex;
      .label {
        height: 22px;
        padding: 0 8px;
        margin-right: 6px;
        color: #53ce78;
        font-weight: 400;
        background: rgba(62, 166, 255, 0);
        border: 1px solid #53ce78;
        border-radius: 3px;
      }
    }
    .w-title {
      width: 100%;
      margin-top: 10px;
      font-size: 13px;
      color: #555555;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .w-operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 10px;
      .time {
        font-weight: 400;
        font-size: 13px;
        color: #999999;
      }
      .operate {
        width: 78px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #53ce78;
        color: #ffffff;
        font-size: 12px;
        border-radius: 16px;
        .icon {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }
      }
    }
  }

  .ms-tip {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    padding: 15px 10px;
    box-sizing: border-box;
    margin: 10px 10px 0 10px;
    border-radius: 8px;
    background: #fff;
    .t-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        font-weight: 600;
        font-size: 16px;
        color: #333333;
      }
      .right {
        display: flex;
        align-items: center;
        color: #53ce78;
        font-size: 12px;
        .icon {
          width: 16px;
          height: 16px;
        }
      }
    }
    .t-content {
      margin-top: 10px;
      line-height: 20px;
      font-size: 14px;
      color: #666666;
      text {
        color: #53ce78;
      }
    }
  }

  .ms-operate {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 15px;
    width: 100%;
    height: 80px;
    background: #ffffff;
    border: 1px solid #e2dfdf;
    .o-left {
      width: 162px;
      color: #333333;
      font-size: 14px;
    }
    .o-right {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 138px;
      height: 42px;
      font-weight: 600;
      font-size: 16px;
      color: #ffffff;
      background: #53ce78;
      border-radius: 21px;
    }
  }
}
</style>
